<template>
  <!-- 内容 -->
  <div class="container">
    <div class="tabs" id="tabs">
      <div
        class="tab_item"
        :class="{ active: activeTabs === item.code }"
        :id="item.code"
        v-for="item in tabs"
        :key="item.id"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="content">
      <div class="content_left box" :class="{ isImg: leftData[0]?.isImg }">
        <div v-for="item in leftData" :key="item.id" class="content_item">
          <div class="img" v-if="item.isImg">
            <el-carousel height="100%">
              <el-carousel-item v-for="img in item.imgs" :key="img">
                <div class="image">
                  <img :src="img.cover" alt="" class="carousel_item_img" />
                </div>
                <div class="title">
                  <span class="a">{{ img.title }}</span>
                </div>
              </el-carousel-item>
            </el-carousel>
            <!-- <img :src="item.url" alt="" /> -->
          </div>
          <div class="list" v-else>
            <div class="time">
              <div class="year_and_month">2022年05月</div>
              <div class="day">27</div>
            </div>
            <div class="title">
              <span class="a">{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content_right box">
        <div class="content_item" v-for="item in rightData" :key="item.id">
          <div class="list">
            <div class="time">
              <div class="year_and_month">
                {{ formatDate(item.unDate, "yyyy年MM月") }}
              </div>
              <div class="day">{{ formatDate(item.unDate, "d") }}</div>
            </div>
            <div class="title">
              <span class="a">{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="more">
      <span>>>查看更多</span>
    </div>
    <div class="bottom" ref="bottom"></div>
  </div>
</template>

<script>
import mask2 from "@/components/mask2";
import { getColumn, getDynamic, getSort } from "@/api/index";
export default {
  components: { mask2 },
  props: {
    padding: {
      default: "0px 12%",
    },
    dynamicData: {
      type: Array,
    },
  },
  data() {
    return {
      activeTabs: "GZDT",
      tabs: [
        {
          id: 1,
          code: "GZDT",
          title: "工作动态",
          path: "",
        },
        {
          id: 2,
          code: "DJHD",
          title: "党建活动",
          path: "",
        },
        {
          id: 3,
          code: "TZGG",
          title: "通知公告",
          path: "",
        },
      ],
      leftData: [],
      rightData: [],
      data: [
        {
          code: "GZDT",
          data: [],
        },
        {
          code: "DJHD",
          data: [],
        },
        {
          code: "TZGG",
          data: [],
        },
      ],
      svgs: [
        {
          color: "#c34f3d",
          width: 1920,
          height: 107,
          paths: [
            " M 220.00 107.00  L 699.00 107.00 C 631.01 58.33 559.44 4.00 473.00 0.00 L 459.00 0.00 C 369.30 6.45 297.77 68.21 220.00 107.00 Z",
            " M 1825.00 107.00  L 1920.00 107.00 L 1920.00 31.00 C 1888.16 55.57 1857.33 83.28 1825.00 107.00 Z",
            " M 1049.00 107.00  L 1374.00 107.00 C 1273.55 64.06 1148.71 58.11 1049.00 107.00 Z",
          ],
          class: "mask",
          pDom: "bottom",
        },
      ],
    };
  },
  watch: {
    activeTabs: {
      handler(val) {
        this.randomData(val);
      },
    },
    dynamicData: {
      handler(val) {
        val.forEach((item) => {
          if (item.article === "工作动态") {
            this.handleData(item.children, "gzdt");
          }
          if (item.article === "党建活动") {
            this.handleData(item.children, "djhd");
          }
          if (item.article === "通知公告") {
            this.handleData(item.children, "tzgg");
          }
        });
        this.randomData(this.activeTabs);
      },
    },
  },
  created() {},
  mounted() {
    this.svgs.forEach((item) => {
      const svgContent = this.$createSvg(item);
      const mask = document.createElement("div");
      mask.className = item.class;
      mask.style.position = "absolute";
      mask.style.top = "0";
      mask.style.left = "0";
      mask.style.right = "0";
      mask.style.bottom = "0";
      mask.style.zIndex = "1";
      mask.innerHTML = svgContent;
      this.$refs[item.pDom].appendChild(mask);
    });
    this.addEventListenerTabs();
  },
  methods: {
    formatDate(time, format) {
      let date = new Date(time);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      let formattedDate = format;
      formattedDate = formattedDate.replace("yyyy", year);
      formattedDate = formattedDate.replace(
        "MM",
        month < 10 ? `0${month}` : month
      );
      formattedDate = formattedDate.replace("M", month);
      formattedDate = formattedDate.replace("dd", day < 10 ? `0${day}` : day);
      formattedDate = formattedDate.replace("d", day);
      return formattedDate;
    },
    randomData(val) {
      this.leftData = [];
      this.rightData = [];
      let res = this.data.find((item) => item.code === val).data;
      let imgData = res.filter((item) => item.isImg);
      if (imgData.length) {
        this.leftData = imgData;
        this.rightData = res.filter((item) => !item.isImg);
      } else {
        res.forEach((item, index) => {
          if (index % 2) {
            this.rightData.push(item);
          } else {
            this.leftData.push(item);
          }
        });
      }
      this.$forceUpdate();
    },
    // 监听鼠标移动到tabs中
    addEventListenerTabs() {
      document.getElementById("tabs").addEventListener("mousemove", (e) => {
        if (e.target.className.includes("tab_item")) {
          if (this.activeTabs !== e.target.id) {
            this.activeTabs = e.target.id;
          }
        }
      });
    },
    handleData(res, code) {
      let newRes = [];
      if (res.length <= 8) {
        newRes = res;
      } else {
        newRes = res.slice(0, 8);
      }
      let imgs = [];
      newRes.forEach((item) => {
        if (item.cover) {
          imgs.push(item);
        }
      });
      let data = [];
      if (imgs.length) {
        newRes.forEach((item, index) => {
          if (index < 4) {
            data.push(item);
          }
        });
        this.assignment(code, [{ isImg: true, id: 0, imgs }, ...data]);
      } else {
        data = [...newRes];
        this.assignment(code, [...data]);
      }
    },
    deepClone(obj) {
      if (obj === null || typeof obj !== "object") {
        return obj;
      }

      let clone;
      if (Array.isArray(obj)) {
        clone = [];
        for (let i = 0; i < obj.length; i++) {
          clone[i] = deepClone(obj[i]);
        }
      } else {
        clone = {};
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
          }
        }
      }

      return clone;
    },
    assignment(code, data) {
      let index = this.data.findIndex(
        (item) => item.code.toLocaleLowerCase() === code.toLocaleLowerCase()
      );
      this.data[index].data = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f9f7;
  position: relative;
  .tabs {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    .tab_item {
      margin: 0 30px;
      color: #666;
      font-size: 30px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      font-weight: bold;
      padding: 0 10px;
      &.active {
        color: #000;
        border-bottom: 4px solid #c34f3d;
      }
    }
  }
  .content {
    width: 1440px;
    margin: 0 auto;
    min-height: 420px;
    display: flex;
    background-color: #fff;
    .box {
      flex: 1;
      &:nth-child(1) {
        margin-right: 15px;
      }
      &:nth-child(2) {
        margin-left: 15px;
      }
      display: flex;
      flex-direction: column;
      &.isImg {
        .content_item {
          width: 100%;
          .img {
            width: 100%;
            position: relative;
            ::v-deep .el-carousel__container {
              width: 100%;
              // aspect-ratio: 704/420;
              padding-top: calc(420 / 704 * 100%);
            }
            ::v-deep .el-carousel__indicators--horizontal {
              bottom: 12%;
            }
            .image {
              position: relative;
              width: 100%;
              padding-top: calc(420 / 704 * 100%);
              img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
            }
            .title {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 12%;
              background-color: rgba($color: #000000, $alpha: 0.5);
              display: flex;
              align-items: center;
              color: #fff;
              padding: 0 15px;
              .a {
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
      .content_item {
        margin-bottom: 20px;
        flex: 1;
        &:last-child {
          margin-bottom: 0;
        }
        .list {
          display: flex;
          height: 100%;
          .time {
            height: 100%;
            aspect-ratio: 1 / 1;
            .year_and_month {
              width: 100%;
              height: 33%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #c34f3d;
              color: #fff;
              font-size: 86%;
              font-weight: bold;
            }
            .day {
              height: 67%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #ffcccc;
              font-size: 230%;
              color: #666;
              font-weight: bold;
            }
          }
          .title {
            flex: 1;
            padding: 20px;
            .a {
              font-size: 16px;
              color: #000;
              font-weight: bold;
              line-height: 28px;
              cursor: pointer;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
  .more {
    width: 1440px;
    margin: 0 auto;
    margin-top: 20px;
    display: grid;
    justify-content: end;
    span {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 106px;
    position: relative;
    overflow-x: clip;
  }
}
</style>
